{% extends 'base.html.twig' %}

{% block stylesheets %}
<style>
    #body {
        background: transparent url('{{ imgsrc("images/gameoverbg.jpg") }}') no-repeat top center;
        background-size: cover;
    }
    .title-wrapper { padding-top: 10px; }
    .title { display: block; margin: 0 auto; width: 190px; position: relative; z-index: 3; }
    .score-wrapper { width: 294px; margin: 0 auto; position: relative; top: -5px; }
    .scorebg { width: 100%; }
    .score { 
        position:absolute; left: 0; right: 0; top: 100px; 
        width: 100%; text-align: center; font-size: 20px; text-shadow: 5px 5px 5px #333;
    }
    .btn-wrapper { position: absolute; z-index: 2; width: 100%; bottom: 8%; }
    .btns { margin: 0 auto; width: 265px; }
    .btn { display: block; width: 77px; float: left; margin: 5px; }
    .btn1 { float: left; }
    .btn img { width: 100%; }
    .bottom { position:absolute; bottom: -60px; width: 100%; }
    .bottom img { width: 100%; }
    @media all and (min-width: 370px) {
        .score-wrapper { top: 20px; }
        .bottom { 
            bottom: -30px;
        }
    }
    @media all and (min-width: 410px) {
        .score-wrapper { top: 30px; }
        .bottom { 
            bottom: 0px;
        }
    }
    @media all and (max-height: 480px) { 
        .btn-wrapper {
            bottom: 0;
            transform: scale3d(0.8, 0.8, 1);
            -webkit-transform: scale3d(0.8, 0.8, 1);
        }
        .bottom { 
            bottom: -100px;
        }
    }
    @media all and (max-height: 420px) {
        .score-wrapper {
            top: -30px;
            transform: scale3d(0.8, 0.8, 1);
            -webkit-transform: scale3d(0.8, 0.8, 1);
        }
        .btn-wrapper {
            bottom: 0;
            transform: scale3d(0.8, 0.8, 1);
            -webkit-transform: scale3d(0.8, 0.8, 1);
        }
        .bottom { 
            bottom: -120px;
        }
    }
</style>
{% endblock %}

{% block body %} 
    <div class='title-wrapper'>
        <img class='title' src='{{ imgsrc("images/gameover-title.png") }}'>
    </div>    
    <div class='score-wrapper'>
        <img class='scorebg' src='{{ imgsrc("images/scorebg.png") }}'> 
        <div class='score'>400</div>
    </div>
    <div class='btn-wrapper'>
        <div class='btns clearfix'>
            <a class='btn btn1' href='#'><img src='{{ imgsrc("images/btn-link.png") }}'></a>
            <a class='btn btn2' href='{{ urlFor("game")}}'><img src='{{ imgsrc("images/btn-again.png") }}'></a>
            <a class='btn btn3' href='#'><img src='{{ imgsrc("images/btn-share.png") }}'></a>
        </div>
    </div>    
    <div class='bottom'><img src='{{ imgsrc("images/gameover-b.png") }}'></div>
{% endblock %}

{% block javascripts %}
<script>

$(function(){
    $('#body').css('height', h + 'px');
    
});
</script>
{% endblock %}